import React, { Component } from 'react'
import {connect} from 'react-redux'
import {setName,add,dis} from '../../store/actions/homeActions'

class Home extends Component {
    
    state={
       val:''
    }

    render() {
        const {val} = this.state
        return (
            <div>
                {/* 修改名字的 */}
                <div>
                    {this.props.name}
                    <input type="text" value={val} onChange={ev=>this.setState({val:ev.target.value})}/>
                    <button onClick={()=>this.props.setName(val)}>修改名字</button>
                </div>
                
                {/* 加加减减 */}
                <div>
                    <span onClick={()=>this.props.count&&this.props.dis()}>-</span>

                    {this.props.count}

                    <span onClick={()=>this.props.add()}>+</span>

                </div>
               

            </div>
        )
    }
}

let mapStateToProps = store => {

    const {name,count} = store.home
    return {
        name,
        count
    }
}

let mapDispatchToProps = dispatch =>{

    return {
        setName(val){
            dispatch(setName(val))
        },
        dis(){
            dispatch(dis())
        },
        add(){
            dispatch(add())
        }
    }
}

Home = connect(mapStateToProps,mapDispatchToProps)(Home)

export default Home